// 图片显示问题解决方案示例页面
const imageHelper = require('../../utils/image-helper');

Page({
  data: {
    originalUrl: 'http://jslib-cccommon.oss-cn-shanghai.aliyuncs.com/image/2025-8-18/10/150469/陶风书话17.jpg?x-oss-process=image/resize,w_480',
    processedUrl1: '',
    processedUrl2: '',
    localImagePath: ''
  },

  onLoad() {
    this.processImageUrls();
  },

  /**
   * 处理图片URL
   */
  processImageUrls() {
    const originalUrl = this.data.originalUrl;
    
    // 解决方案1: 添加响应头参数
    const processedUrl1 = imageHelper.processOSSImageUrl(originalUrl);
    
    // 解决方案2: 转换为HTTPS
    const processedUrl2 = originalUrl.replace('http://', 'https://');
    
    this.setData({
      processedUrl1,
      processedUrl2
    });
    
    console.log('原始URL:', originalUrl);
    console.log('处理后URL1:', processedUrl1);
    console.log('处理后URL2:', processedUrl2);
  },

  /**
   * 图片加载成功
   */
  onImageLoad(e) {
    console.log('图片加载成功:', e.detail);
    wx.showToast({
      title: '图片加载成功',
      icon: 'success',
      duration: 1000
    });
  },

  /**
   * 图片加载失败
   */
  onImageError(e) {
    console.error('图片加载失败:', e.detail);
    wx.showToast({
      title: '图片加载失败',
      icon: 'none',
      duration: 2000
    });
  },

  /**
   * 预览图片
   */
  previewImage(e) {
    const url = e.currentTarget.dataset.url;
    if (url) {
      imageHelper.previewImage(url);
    }
  },

  /**
   * 下载图片到本地
   */
  async downloadImage() {
    wx.showLoading({
      title: '正在下载...'
    });
    
    try {
      const localPath = await imageHelper.downloadImage(this.data.processedUrl1);
      this.setData({
        localImagePath: localPath
      });
      
      wx.hideLoading();
      wx.showToast({
        title: '下载成功',
        icon: 'success'
      });
    } catch (error) {
      wx.hideLoading();
      console.error('下载失败:', error);
      wx.showToast({
        title: '下载失败',
        icon: 'none'
      });
    }
  },

  /**
   * 检查图片信息
   */
  async checkImageInfo() {
    try {
      const info = await imageHelper.getImageInfo(this.data.processedUrl1);
      console.log('图片信息:', info);
      
      wx.showModal({
        title: '图片信息',
        content: `宽度: ${info.width}px\n高度: ${info.height}px\n类型: ${info.type}`,
        showCancel: false
      });
    } catch (error) {
      console.error('获取图片信息失败:', error);
      wx.showToast({
        title: '获取信息失败',
        icon: 'none'
      });
    }
  },

  /**
   * 显示解决方案说明
   */
  showSolutions() {
    const content = `
问题原因：
1. 阿里云OSS设置了Content-Disposition: attachment
2. 使用了HTTP协议而非HTTPS
3. 微信小程序对图片显示有特殊要求

解决方案：
1. 添加response-content-disposition=inline参数
2. 使用HTTPS协议
3. 使用van-image组件
4. 下载到本地显示
    `;
    
    wx.showModal({
      title: '解决方案说明',
      content: content,
      showCancel: false
    });
  }
});
